<template>
	<view class="register">
		<view class="register_title">
			<text>登录</text>
		</view>
		<!-- <view :class="[{nameFocus:alltrue},'register_user']"> -->
			<input type="text" v-model="username" placeholder="用户ID（字母或数字)" @input="bindUsername" @focus="onFocusName" @blur="onBlurName"/>
		<!-- </view> -->
		<!-- <view :class="[{psdFocus:alltrue},'register_pwd']"> -->
			<input type="text" password placeholder="用户密码" @input="bindPassword" @focus="onFocusPsd" @blur="onBlurPsd"/>
		<!-- </view> -->
		<view class="register_btn">
			<button @click="login">登录</button>
		</view>
		<view class="register_back" @click="toregister">
			去注册
		</view>
	</view>
	
</template>

<script>
	let WebIM = require("../../utils/WebIM")["default"];
	let __test_account__, __test_psword__;
	let disp = require("../../utils/broadcast");
	// __test_account__ = "easezy";
	// __test_psword__ = "111111";
	 let runAnimation = true
	 export default{
		 data(){
			 return{
				 name: "",
				 psd: "",
				 grant_type: "password",
				 rtcUrl: '',
				 username:''
			 }
		 },
		 onLoad: function(){
		 	const me = this;
		 	// const app = getApp();
		 	// new app.ToastPannel.ToastPannel();
		 	
		 	disp.on("em.xmpp.error.passwordErr", function(){
				uni.showToast({
					title:'用户名或密码错误'
				})
		 	});
		 },
		 methods:{
			 toregister(){
				 
				 uni.navigateTo({
				 	url:'/pages/register/register'
				 })
			 },
			 statechange(e) {
			     console.log('live-player code:', e.detail.code)
			 },
			 
			 error(e) {
			     console.error('live-player error:', e.detail.errMsg)
			 },
			 bindUsername: function(e){
				 this.name = e.detail.value
			 },
			 
			 bindPassword: function(e){
				 this.psd = e.detail.value
			 },
			 onFocusPsd: function(){
				 this.psdFocus = 'psdFocus'
			 },
			 onBlurPsd: function(){
				 this.psdFocus = ''
			 },
			 onFocusName: function(){
				 this.nameFocus = 'nameFocus'
			 },
			 onBlurName: function(){
				 this.nameFocus = ''
			 },
			 
			 login: function(){
				 getApp().globalData.username = this.username;
				 console.log(this.$connreopen)
			 	runAnimation = !runAnimation
			 	if(!__test_account__ && this.name == ""){
					uni.showToast({
						title:'请输入用户名'
					})
			 		return;
			 	}
			 	else if(!__test_account__ && this.psd == ""){
					uni.showToast({
						title:'请输入密码'
					})
			 		return;
			 	}
			 	uni.setStorageSync("myUsername",__test_account__ || this.name.toLowerCase());
			 
			 	this.$connopen({
			 		apiUrl: WebIM.config.apiURL,
			 		user: __test_account__ || this.name.toLowerCase(),
			 		pwd: __test_psword__ || this.psd,
			 		grant_type: this.grant_type,
			 		appKey: WebIM.config.appkey
			 	});
			 }
		 }
	 }
</script>

<style>
	.register {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}
	.register_title {
		height: 128rpx;
		padding-left: 32rpx;
	}
	.register_title text{
		font-size: 64rpx;
		font-weight: 400;
		line-height: 96rpx;
	}
	
	.register_user, .register_pwd, .register_btn {
		display: flex;
	}
	.register_user input, .register_pwd input {
		height: 96rpx;
		background-color: #ffffff;
		border: 2rpx solid #999999;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 0 32rpx;
		font-size: 34rpx;
		color: #000;
		margin: 0 64rpx;
		display: inline-block;
		flex: 1;
	}
	
	.nameFocus input, .psdFocus input{
		border: 3rpx solid #0873DE;
		box-sizing: border-box;
	}
	.register_user input {
		margin-top: 128rpx
	}
	.register_pwd input {
		margin-top: 32rpx;
	}
	.register_btn button{
		flex: 1;
		height: 96rpx;
		margin: 32rpx 64rpx 0;
		border-radius: 8rpx;
		line-height: 96rpx;
		color: rgb(255,255,255);
		background-color: #0873DE;
		font-size: 34rpx;
	}
	.btn_hover {
		background-color: #137DCD;
	}
	.register_back {
		margin-top: 28rpx;
		padding: 0 64rpx;
		height: 34rpx;
	}
	.register_back navigator {
		font-size: 24rpx;
		color: #0873DE;
	}
	.navigator-hover{
		color: #2892FD;
		background-color: #fff;
	}
	.input-hover{
		border: 2rpx solid red;
	}
	
</style>
 